<template>
  <div>
    <el-card class="box-card">
      <div class="table">
        <div class="title">订单信息
          <span>
            <el-tag v-if="detailList.status === 0" type="danger" effect="dark">待处理</el-tag>
            <el-tag v-else-if="detailList.status === 1" type="warning" effect="dark">进行中</el-tag>
            <el-tag v-else-if="detailList.status === 2">已完成</el-tag>
            <el-tag v-else-if="detailList.status === 3" type="info">已拒绝</el-tag>
          </span>
        </div>
        <div class="info">
          <el-row>
            <el-col :span="10">
              订单编号：{{ detailList.orderSn }}
              <span> <el-button type="text" @click="checkDetail">查看订单详情</el-button> </span>
            </el-col>
            <el-col :span="7">
              退单人姓名：{{ detailList.returnName }}
            </el-col>
            <el-col :span="7">
              退单理由：{{ detailList.reason }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              退单描述:{{ detailList.description }}
            </el-col>
            <el-col :span="6">
              申请时间:{{ detailList.createTime }}
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="line" />
      <div class="table">
        <div class="title">退货商品</div>
        <el-table
          :data="tableList"
          style="width: 100%"
          border
        >
          <el-table-column
            label="商品图片"
            width="250"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="scope.row.productPic" style="width:100px;height:100px">
            </template>
          </el-table-column>
          <el-table-column
            label="商品描述"
            width="250"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.productName }}</div>
              <div>品牌：{{ scope.row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="productRealPrice"
            label="商品价格"
            width="250"
            align="center"
          />
          <el-table-column
            label="商品描述"
            width="250"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.productName }}</div>
              <div>品牌：{{ scope.row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品属性"
            width="250"
            align="center"
          >
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.productAttr" :key="index">
                <span>{{ item.key }}:</span><span>{{ item.value }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="productCount"
            label="商品数量"
            width="100"
            align="center"
          />
          <el-table-column
            prop="returnAmount"
            label="商品总计"
            width="80"
            align="center"
          />
        </el-table>
      </div>
      <div class="line" />
      <div class="table">
        <div class="title">用户信息:</div>
        <el-row>
          <el-col :span="6">
            联系人：{{ detailList.returnName }}
          </el-col>
          <el-col :span="6">
            联系电话:{{ detailList.returnPhone }}
          </el-col>
        </el-row>
        <div class="line" />
        <div class="title">费用信息:</div>
        <el-row>
          <el-col :span="6">
            退单金额：<span style="color:#f00">{{ detailList.returnAmount }}</span>
          </el-col>
          <el-col :span="6">
            运费金额: <span style="color:#f00">0</span>
          </el-col>
        </el-row>
        <div v-if="detailList.status === 0" style="margin-top:20px">
          <el-form ref="forms" :inline="true" :model="info" class="demo-form-inline" :rules="rules">
            <el-form-item label="退款金额">
              <el-input-number v-model="info.returnAmount" label="描述文字" />
            </el-form-item>
            <el-form-item label="处理人" prop="handleMan">
              <el-input v-model="info.handleMan" placeholder="处理人" />
            </el-form-item>
            <el-form-item label="处理备注" prop="handleNote">
              <el-input v-model="info.handleNote" placeholder="处理备注" />
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="primary" @click="agree">同意退款</el-button>
            <el-button @click="reject">拒绝退款</el-button>
          </div>
        </div>
        <div v-else-if="detailList.status === 1 || detailList.status === 3">
          <div class="line" />
          <div class="title">处理结果：</div>
          <el-row>
            <el-col :span="6">
              处理人：{{ detailList.handleMan }}
            </el-col>
            <el-col :span="6">
              处理备注：{{ detailList.handleNote }}
            </el-col>
            <el-col :span="6">
              处理时间：{{ detailList.handleTime }}
            </el-col>
          </el-row>
        </div>
        <div v-else-if="detailList.status === 1">
          <el-form ref="forms" :inline="true" :model="form" class="demo-form-inline" :rules="rules">
            <el-form-item label="收货人" prop="receiveMan">
              <el-input v-model="form.receiveMan" placeholder="收货人" />
            </el-form-item>
            <el-form-item label="收货备注" prop="receiveNote">
              <el-input v-model="form.receiveNote" placeholder="收货备注" />
            </el-form-item>
          </el-form>
          <div class="btn"> <el-button type="primary" @click="confirm">确认收货</el-button> </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { orderReturn, receiveProduct, agreeApply, rejectApply } from '@/api/order/index'
export default {
  data() {
    return {
      id: '',
      detailList: [],
      tableList: [],
      info: {
        handleMan: '',
        handleNote: '',
        returnAmount: ''
      },
      form: {
        receiveMan: '',
        receiveNote: ''
      },
      rules: {
        receiveMan: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        receiveNote: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        handleMan: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        handleNote: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
  },
  created() {
    this.id = this.$route.params.id
    this.getlist()
  },
  methods: {
    // 同意退货
    agree() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          agreeApply(this.id, {
            id: this.id,
            handleMan: this.info.handleMan,
            handleNote: this.info.handleNote,
            returnAmount: this.info.returnAmount
          }).then(res => {
            if (res.success) {
              this.$message.success('同意退货')
              window.location.reload()
            } else {
              this.$message.error('失败')
            }
          })
        } else {
          return false
        }
      })
    },
    reject() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          rejectApply(this.id, {
            id: this.id,
            handleMan: this.info.handleMan,
            handleNote: this.info.handleNote
          }).then(res => {
            if (res.success) {
              this.$message.success('拒绝退货')
              window.location.reload()
            } else {
              this.$message.error('失败')
            }
          })
        } else {
          return false
        }
      })
    },
    confirm() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          receiveProduct(this.id, {
            id: this.id,
            receiveMan: this.form.receiveMan,
            receiveNote: this.form.receiveNote
          }).then(res => {
            if (res.success) {
              this.$message.success('已确认收货')
              window.location.reload()
            }
          })
        } else {
          return false
        }
      })
    },
    getlist() {
      orderReturn(this.id).then(res => {
        console.log(res)
        this.detailList = res.data.orderReturnApply
        const obj = {
          productPic: res.data.orderReturnApply.productPic,
          productName: res.data.orderReturnApply.productName,
          productAttr: JSON.parse(res.data.orderReturnApply.productAttr), // 属性
          productCount: res.data.orderReturnApply.productCount,
          productBrand: res.data.orderReturnApply.productBrand, // 品牌
          productRealPrice: res.data.orderReturnApply.productRealPrice, // 价格
          returnAmount: res.data.orderReturnApply.returnAmount // 总计
        }
        this.tableList.push(obj)
      })
    },
    // 查看详情
    checkDetail() {
      this.$router.push({ name: 'Detail', params: { id: this.detailList.orderId }})
    }
  }
}
</script>
<style lang="scss" scoped>
  .table{
    padding: 20px 10px;
    .title{
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .el-row{
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      padding-bottom: 10px;
    }
  }
  .line{
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #dcdfe6;
  }
  .btn{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
</style>
